<!--继承布局文件-->
{extend name="index@layout/page"}
<!--子页面css-->
{block name="page-css"}
<style type="text/css">
    .layui-form-label {
        width: 140px;
    }
    .ddddd {
        top: 13px;
    }
    .llccqq {
        margin-top: -9px;
    }
    .llccqq div {
        top: 22.1px;
    }
</style>
{/block}

<!--子页面HTML-->
{block name="page-html"}
<div style="margin-left:20px">
    <div style="display: block;overflow-y: hidden;">
        <div class="cus_price_top search-box" id="searchBoxDiv">
            <form class="form-inline layui-form" id="condition" method="post" role="search">
                <div class="layui-form-item" style="margin-bottom: 3px;">
                    <div class="layui-inline" id="create_time_div">
                        <label class="layui-form-label">
                            统计日期
                        </label>
                        <div class="layui-input-inline">
                            <input autocomplete="off" class="layui-input" id="create_time" lay-verify="date" name="create_time" placeholder="统计日期" type="text" style="width: 200px;">
                            </input>
                        </div>
                    </div>
                    <div id="create_time_one" style="display: none; position:absolute;top:10px;left:10px;z-index: 999999;"></div>
                    <!--                    <div class="btn-style" style="float:right;margin-right:60%;display: none;">-->
                    <!--                        <button class="btn btn-success btn-sm btn-info layui-btn" id="search" name="search" type="button">-->
                    <!--                            <span class="glyphicon glyphicon-search">-->
                    <!--                            </span>-->
                    <!--                            查询-->
                    <!--                        </button>-->
                    <!--                    </div>-->
                    <div class="btn-style" style="float:right;margin-right:60%;display: none;">
                        <button class="btn btn-success btn-sm btn-info layui-btn" id="search" name="search" type="button">
                            <span class="glyphicon glyphicon-search">
                            </span>
                            查询
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <div class="search-box" id="chartListDiv">
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            {volist name="orderList" id="vo"}
            <div id="{$vo.id}" data-title="{$vo.name}" data-time="" data-category="{$vo.category}" name="{$vo.id}" class="chartDiv" style="width: 100%;height:400px; margin-bottom: -9px;"></div>
            <div id="two-{$vo.id}" style="margin-bottom:3%;margin-top: -43px;margin-bottom: 6%;z-index:1231">
                <div style="margin-left: 4%">
                        <span style="position:relative;cursor:pointer;float: left;width: 108px;" class=" llccqq    change-color button-{$vo.id}" data-type="1" data-id="{$vo.id}" id="button-1-{$vo.category}">
                    　　  <img src="__WEBROOT__/manage/img/selection.png?v=1.0.0" />
                    　　  <div class="ddddd" style="position:absolute; z-index:2; left:42px;color: black">推送总量</div>
                        </span>
                    <span style="position:relative;cursor:pointer;float: left;width: 108px;margin-left: -30px;" class="change-color button-{$vo.id}" data-type="3" data-id="{$vo.id}" id="button-1-{$vo.category}">
                    　　  <img src="__WEBROOT__/manage/img/default.png?v=1.0.0" />
                    　　  <div class="ddddd" style="position:absolute; z-index:2; left:35px;color: black">推送失败量</div>
                        </span>
                    <span style="position:relative;cursor:pointer;float: left;width: 108px;margin-left: -30px;" class="change-color button-{$vo.id}" data-type="6" data-id="{$vo.id}" id="button-1-{$vo.category}">
                    　　  <img src="__WEBROOT__/manage/img/default.png?v=1.0.0" />
                    　　  <div class="ddddd" style="position:absolute; z-index:2; left:42px;color: black">查询总量</div>
                        </span>
                    <span style="position:relative;cursor:pointer;float: left;width: 108px;margin-left: -30px;" class="change-color button-{$vo.id}" data-type="5" data-id="{$vo.id}" id="button-1-{$vo.category}">
                    　　  <img src="__WEBROOT__/manage/img/default.png?v=1.0.0" />
                    　　  <div class="ddddd" style="position:absolute; z-index:2; left:42px;color: black">订阅总量</div>
                        </span>
                </div>
            </div>
            {/volist}
            <input type="hidden" name="searchOne" id="searchOne">
        </div>
    </div>
</div>
{/block}
<!--子页面JS部分-->
{block name="page-script"}
<script src="__MANAGE__/js/echarts.min.js?v=__VERSION__" type="text/javascript"></script>
<script src="__MANAGE__/js/publicFunc.js?v=__VERSION__" type="text/javascript"></script>
<script>
    var page = new pageloading();
    var form = layui.form;
    var smallTime = "";
    $(window).keydown( function(e) {
        var key = window.event?e.keyCode:e.which;
        if(key.toString() == "13"){
            return false;
        }
    });
    // 自适应
    $(window).resize(function() {
        $(".chartDiv").each(function(idx,obj) {
            var _this = $(this);
            chartList[_this.attr("id")].resize();
        });
    });
    $(function() {
        baskInfo();
        mChartInit();
        self.setInterval("searchAllAuto(1)", 300000);
    });
    /*基本操作信息*/
    function baskInfo() {
        page.dgHeightFun(); //列表自适应
        // 点击查询
        // $("#search").click(function() {
        //     searchAll();
        // });
        // 开始日期
        layuiInfo.laydate.render({
            elem: '#create_time'
            ,showBottom: false
            ,done: function(value, date, endDate) {
                // $("#search").trigger("click");
                searchAll();
                // resetOneCategory();
            }
        });
        lay('#search').on('click', function(e) { //假设 test1 是一个按钮
            layuiInfo.laydate.render({
                elem: '#create_time_one'
                ,position: 'static'
                ,show: true //直接显示
                ,done: function(value, date, endDate) {
                    smallTime.data("time",value);
                    var category = '#two-' + smallTime.attr("id");
                    //获取type
                    $type_dd = $(category).find(".llccqq").data('type');
                    dgFun(smallTime.data("category"), value,$type_dd);
                }
                ,showBottom: false
                ,closeStop: '#search' //这里代表的意思是：点击 test1 所在元素阻止关闭事件冒泡。如果不设定，则无法弹出控件
            });
        });
        // 点击查询
        $(".change-color").click(function() {
            $(this).parent().find("img").attr("src","__WEBROOT__/manage/img/default.png?v=1.0.0");
            $(this).find("img").attr("src","__WEBROOT__/manage/img/selection.png?v=1.0.0");
            $(this).parent().find(".change-color").removeClass('llccqq');
            $(this).addClass('llccqq');
            var this_id = $(this).attr("id").substr(9,20);
            var id = "#" + $(this).data("id");
            var time_small = $(id).data('time');
            if(time_small == null || time_small == "" || time_small == undefined){
                var tim_this = $("#create_time").val();
            } else {
                var tim_this = time_small;
            }
            var type = $(this).data('type');
            page.ajaxInfo({
                data: {
                    'create_time': tim_this
                    ,'category': this_id
                    ,'today': 1
                    ,'yesterday': 1
                    ,'daySeven': 1
                    ,'month': 1
                    ,'type':type
                }
                ,url: "{:url('index')}"
            }, function(data) {
                if (data.code == 200) {
                    var legendSelect = legendSeleList[data.data.chartID];
                    if (!legendSelect) {
                        legendSelect = data.data.legendSele;
                    }
                    chartList[data.data.chartID].setOption({
                        legend: {
                            data: data.data.legendData
                            ,selected: legendSelect
                        },
                        xAxis: {
                            data: data.data.xAxisData
                        },
                        series: data.data.seriesData
                    });
                } else {
                    layer.alert(data.msg);
                    return false;
                }
            });
        });
    }

    /*列表加载函数*/
    function dgFun(category, time, type) {
        page.ajaxInfo({
            data: {
                'create_time': time
                ,'category': category
                ,'today': 1
                ,'yesterday': 1
                ,'daySeven': 1
                ,'month': 1
                ,'type': type
            }
            ,url: "{:url('index')}"
        }, function(data) {
            if (data.code == 200) {
                var legendSelect = legendSeleList[data.data.chartID];
                if (!legendSelect) {
                    legendSelect = data.data.legendSele;
                }
                chartList[data.data.chartID].setOption({
                    legend: {
                        data: data.data.legendData
                        ,selected: legendSelect
                    },
                    xAxis: {
                        data: data.data.xAxisData
                    },
                    series: data.data.seriesData
                });
            } else {
                layer.alert(data.msg);
                return false;
            }
        });
    }

    // 图表
    var chartList = {};
    // 选择图例列表
    var legendSeleList = {};
    // 图表初始化
    function mChartInit() {
        $(".chartDiv").each(function(idx,obj) {
            var _this = $(this);

            // 基于准备好的dom，初始化echarts实例
            chartList[_this.attr("id")] = echarts.init(document.getElementById(_this.attr("id")));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: _this.data("title")
                },
                yAxis: [
                    {
                        name: '推送/查询量',
                        type: 'value',
                    },
                    {
                        name: '时间节点(分钟)',
                        type: 'value',
                    }],
                dataZoom: [
                    {
                        type: 'inside',
                        show: true,
                        xAxisIndex: [0],
                    },
                    {
                        type: 'inside',
                        show: true,
                        yAxisIndex: [0],
                    },
                    {
                        type: 'inside',
                        xAxisIndex: [0],
                    },
                    {
                        type: 'inside',
                        yAxisIndex: [0],
                    }
                ],
                tooltip: {
                    trigger: 'axis',
                    formatter: function(params){
                        var timeNow = params[0].name;
                        var timeSplit = timeNow.split(':');
                        var timeNew = (parseInt(timeSplit[1]) + 4);
                        if (timeNew < 10) {
                            timeNew = "0" + timeNew;
                        }
                        var timeNext = timeSplit[0] + ':' + timeNew;
                        var timeTitle = timeNow + '~' + timeNext;
                        var res = '时间 ：' + timeTitle + '<br />';
                        for(var i=0; i < params.length; i++) {
                            var dataShow = '-';
                            if(params[i].data !== null && params[i].data !== 'NaN') {
                                dataShow = formatNum(params[i].data);
                            }
                            res += myPublicFun.getTooltipMarker(params[i].color) + params[i].seriesName + ' : ' + dataShow + '<br />';
                        }

                        return res;
                    }
                },
                xAxis: {
                    data: []
                },
                series: {
                    type: 'bar',
                    symbol:'diamond',
                    data: [],
                    itemStyle : { normal: {label : {show: true}}}
                },
                grid: {
                    left: '3%',
                    right: '3%',
                    containLabel: true
                },
                toolbox: {
                    show: true,
                    feature: {
                        myTool1: {
                            show: true,
                            title: '日期',
                            icon: 'path://M396,89H345V64.19a6,6,0,0,0-12,0V89H179V64.19a6,6,0,0,0-12,0V89H116a46.172,46.172,0,0,0-46,46.14V407.81A46.215,46.215,0,0,0,116,454H396a46.215,46.215,0,0,0,46-46.19V135.14A46.172,46.172,0,0,0,396,89Zm0,353H116a34.2,34.2,0,0,1-34-34.19V180H430V407.81A34.2,34.2,0,0,1,396,442Zm34-274H82V135.14A34.159,34.159,0,0,1,116,101h51v25.09a6,6,0,1,0,12,0V101H333v25.09a6,6,0,1,0,12,0V101h51a34.159,34.159,0,0,1,34,34.14Z',
                            onclick: function (e, l, k, n) {
                                smallTime = $(l.getDom());
                                var oldCategory = $("#searchOne").val();
                                if (oldCategory == $(l.getDom()).data("category")) {
                                    if ($("#create_time_one").is(":visible")) {
                                        resetOneCategory();
                                    }
                                } else {
                                    $("#searchOne").val($(l.getDom()).data("category"));
                                    $("#create_time_one").html('');
                                    $("#create_time_one").hide();

                                    $("#create_time_one").css({
                                        left:n.event.clientX - 310,
                                        top:n.event.clientY + 10 + $(document).scrollTop(),
                                    });
                                    $("#create_time_one").show();
                                    $("#search").trigger("click");
                                }
                            }
                        },
                        dataView: {readOnly: true},
                        saveAsImage: {},
                    }
                },
            };

            // 使用刚指定的配置项和数据显示图表。
            chartList[_this.attr("id")].setOption(option);

            chartList[_this.attr("id")].on('legendselectchanged', function(params) {
                legendSeleList[_this.attr("id")] = params.selected;
            });

            dgFun(_this.data("category"), $("#create_time").val(),1);
        });
    }
    function searchAll(nrd) {
        $(".chartDiv").each(function(idx,obj) {
            var _this = $(this);
            //获取每个type类型
            $str = '#two-'  + _this.attr("id");
            var type_this = $($str).find(".llccqq").data("type");
            var time = $("#create_time").val();
            dgFun(_this.data("category"), time, type_this);
        });
    }
    function searchAllAuto() {
        $(".chartDiv").each(function(idx,obj) {
            var _this = $(this);
            //获取每个type类型
            $str = '#two-'  + _this.attr("id");
            var type_this = $($str).find(".llccqq").data("type");
            var timess = _this.data("time");
            if(timess == null || timess == "" || timess == undefined){
                var time = $("#create_time").val();
            } else {
                var time = timess;
            }
            dgFun(_this.data("category"), time, type_this);
        });
    }
    function resetOneCategory() {
        $("#searchOne").val('');
        $("#create_time_one").html('');
        $("#create_time_one").hide();
    }

    function formatNum(strNum) {
        if(strNum.length <= 3) {
            return strNum;
        }
        if(!/^(\+|-)?(\d+)(\.\d+)?$/.test(strNum)) {
            return strNum;
        }
        var a = RegExp.$1,
            b = RegExp.$2,
            c = RegExp.$3;
        var re = new RegExp();
        re.compile("(\\d)(\\d{3})(,|$)");
        while(re.test(b)) {
            b = b.replace(re, "$1,$2$3");
        }
        return a + "" + b + "" + c;
    }
</script>

{/block}

